<template>
	<div class="deliberatedetail">
		<div class="title">
			{{detail.title}}
		</div>
		<div class="from">
			<span>发起人：{{detail.resource}}</span>
			<span>时间：{{detail.starttime_text}}</span>
			<span>浏览：{{detail.browse}}次</span>
		</div>
		<van-divider />
		<div class="content">
			<div class="list" v-for="(item,index) in detail.child_vote" :key="item.id">
				<div class="head-box">
					<div class="num">{{index+1}}</div>
					<div class="atitle">{{item.title}}</div>
				</div>
				<div class="text" v-html="item.votecontent"></div>
				<div class="button-group">
					<div class="button-item zan" @click="toupiao(1,item)">
						<van-icon name="good-job-o" />
						赞同({{item.agree}})
					</div>
					<div class="button-item" @click="toupiao(3,item)">不关心({{item.against}})</div>
					<div class="button-item fan" @click="toupiao(2,item)">
						<van-icon name="good-job-o" />
						反对({{item.notcare}})
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: "DeliberateDetail",
		components: {

		},
		data() {
			return {
				detail: {
					child_vote: {
						votecontent: ''
					}
				},
				userInfo:{}
			}
		},
		mounted() {
			this.userInfo =JSON.parse(this.$getcookie("userInfo"))
			this.getData()
		},
		methods: {
			getData() {
				let detailData = {
					user_id:this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: 0,
					vote_id: this.$route.query.id
				}
				this.$api.home.deliberateVote(detailData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.detail = res.data
					}
		
				})
			},
			toupiao(type,item){
				let detailData = {
					user_id:this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					site_id: 0,
					vote_id: this.$route.query.id,
					child_vote_id: item.id,
					typedata: type,
				}
				this.$api.home.deliberateBet(detailData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$toast.success(res.msg)
						this.getData()
					}else{
						this.$toast.fail(res.msg)
					}
				
				})
			}
		}


	}
</script>

<style scoped lang="less">
	.deliberatedetail {
		padding: 1.13rem 0.78rem;
		background: #fff;

		.title {
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(38, 38, 38, 1);
		}

		.from {
			font-size: 0.69rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(147, 147, 147, 1);
			margin-top: 1rem;
			display: flex;
			justify-content: space-between;
		}

		.content {
			.list {
				margin-bottom: 5rem;
				.head-box {
					width: 100%;
					height: 2.56rem;
					background: rgba(254, 119, 0, 1);
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border: 1px solid rgba(254, 119, 0, 1);
					margin-top: 1.44rem;

					.num {
						width: 3.81rem;
						height: 100%;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-size: 0.94rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(254, 119, 0, 1);
						background: #fff;
					}

					.atitle {
						height: 100%;
						flex: 1;
						font-size: 0.81rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						padding-left: 1.19rem;
						display: inline-flex;
						justify-content: flex-start;
						align-items: center;
					}
				}

				.text {
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(54, 54, 54, 1);
					line-height: 1.25rem;
					margin-top: 1.88rem;
				}

				.button-group {
					display: flex;
					justify-content: space-between;
					margin-top: 1.34rem;

					.button-item {
						width: 6.19rem;
						height: 2.81rem;
						background: #fff;
						border-radius: 2rem;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size:0.94rem;
						font-family:PingFang SC;
						font-weight:500;
						color:#FE7700;
						border:1px solid rgba(254,119,0,1);
						&.zan{
							background: rgba(254, 119, 0, 1);
							color:rgba(255,255,255,1);
						}
						&.fan{
							background: rgba(254, 119, 0, 1);
							color:rgba(255,255,255,1);
							.van-icon-good-job-o {
								transform: rotate(180deg);
							}
							
						}
					}
				}
			}
		}
	}
</style>
